<template>
  <div class="tab-container" id="tab-container">
    <!--  固定项 start  -->
    <div class="tab-fixed">
      <div
        class="tab-item"
        :class="{ 'tab-item--active': tableBody.groupId === item.groupId }"
        v-for="item in fixedList"
        :key="item.groupId"
        @click="handelGroupChange(item)"
      >
        <span class="tab-item__label">{{ item.groupName }}({{ item.number ?? 0 }})</span>
      </div>
    </div>
    <!--    固定项 end-->
    <!--  左右切换按钮 start  -->
    <svg-icon v-if="isShow" className="tab-list__left-arrow" iconClass="left_arrow" size="24" @click="handelLeft" />
    <svg-icon v-if="isShow" className="tab-list__right-arrow" iconClass="right_arrow" size="24" @click="handelRight" />
    <!--  左右切换按钮 end  -->
    <div id="tabsContainer" class="dragArea">
      <div
        class="tab-item drag-handle"
        :class="{ 'tab-item--active': tableBody.groupId === item.groupId }"
        @click="handelGroupChange(item)"
        v-for="item in groupList"
        :key="item.groupId"
      >
        <div class="tab-item_label">
          {{ item.groupName }}
          <span>({{ item.number ?? 0 }})</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch, ref } from "vue";
import useListenerMouseWheel from "./hooks/useListenerMouseWheel";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  tabList: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["update:modelValue", "getList"]);
const tableBody = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const fixedList = ref([]);
const groupList = ref([]);
watch(
  () => props.tabList,
  newVal => {
    let groupData = [],
      fixedData = [];
    newVal?.forEach(item => {
      item.isEditor ? groupData.push({ ...item }) : fixedData.push({ ...item });
    });
    groupList.value = [...groupData];
    fixedList.value = [...fixedData];
  },
  { immediate: true, deep: true }
);

const handelGroupChange = item => {
  tableBody.value.groupId = item.groupId;
  tableBody.value.groupSys = item.groupSys;
  emit("getList");
};

const handelLeft = () => {
  const tabBar = document.getElementById("tabsContainer");
  tabBar.scrollLeft += 110;
};
const handelRight = () => {
  const tabBar = document.getElementById("tabsContainer");
  tabBar.scrollLeft -= 110;
};

const isShow = useListenerMouseWheel("tab-container", "tabsContainer");
</script>

<style scoped lang="scss">
@use "draggableTab";
</style>
